// 这里可以添加学习页面的交互逻辑
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search');
    const sortSelect = document.getElementById('sort');
    const studyItems = document.querySelectorAll('.study-item');
    const tags = document.querySelectorAll('.tag');
    const modal = document.getElementById('detail-modal');
    const modalTitle = document.getElementById('modal-title');
    const modalDescription = document.getElementById('modal-description');
    const closeModal = document.querySelector('.close');
    const addStudyBtn = document.getElementById('add-study-btn');
    const newTitleInput = document.getElementById('new-title');
    const newDescriptionInput = document.getElementById('new-description');
    const studyContent = document.querySelector('.study-content');
    const viewTopicBtn = document.getElementById('view-topic-btn');
    const topicSelect = document.getElementById('topic-select');

    // 搜索功能
    searchInput.addEventListener('input', function() {
        const query = searchInput.value.toLowerCase();
        studyItems.forEach(item => {
            const title = item.querySelector('h3').textContent.toLowerCase();
            if (title.includes(query)) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }
        });
    });

    // 排序功能
    sortSelect.addEventListener('change', function() {
        const sortBy = sortSelect.value;
        const itemsArray = Array.from(studyItems);

        itemsArray.sort((a, b) => {
            if (sortBy === 'date') {
                return new Date(b.dataset.date) - new Date(a.dataset.date);
            } else {
                const titleA = a.querySelector('h3').textContent.toLowerCase();
                const titleB = b.querySelector('h3').textContent.toLowerCase();
                return titleA.localeCompare(titleB);
            }
        });

        const studyContent = document.querySelector('.study-content');
        studyContent.innerHTML = ''; // 清空当前内容
        itemsArray.forEach(item => studyContent.appendChild(item)); // 重新添加排序后的项目
    });

    // 标签过滤功能
    tags.forEach(tag => {
        tag.addEventListener('click', function() {
            const tagName = this.dataset.tag.toLowerCase();
            studyItems.forEach(item => {
                const itemTags = Array.from(item.querySelectorAll('.tag')).map(t => t.textContent.toLowerCase());
                if (itemTags.includes(tagName)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });

    // 查看详情功能
    studyItems.forEach(item => {
        const detailBtn = item.querySelector('.detail-btn');
        detailBtn.addEventListener('click', function() {
            modal.style.display = 'block';
            modalTitle.textContent = item.querySelector('h3').textContent;
            modalDescription.textContent = item.querySelector('p').textContent;
        });

        // 编辑功能
        const editBtn = item.querySelector('.edit-btn');
        editBtn.addEventListener('click', function() {
            const newTitle = prompt("请输入新的主题:", item.querySelector('h3').textContent);
            if (newTitle) {
                item.querySelector('h3').textContent = newTitle;
            }
        });

        // 删除功能
        const deleteBtn = item.querySelector('.delete-btn');
        deleteBtn.addEventListener('click', function() {
            if (confirm("确定要删除这个学习记录吗？")) {
                item.remove();
            }
        });
    });

    // 关闭弹出框
    closeModal.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });

    // 清除过滤功能
    document.getElementById('clear-filter').addEventListener('click', function() {
        studyItems.forEach(item => {
            item.style.display = ''; // 显示所有项目
        });
    });

    addStudyBtn.addEventListener('click', function() {
        const title = newTitleInput.value.trim();
        const description = newDescriptionInput.value.trim();

        if (title && description) {
            const newItem = document.createElement('div');
            newItem.classList.add('study-item');
            newItem.innerHTML = `
                <h3>${title}</h3>
                <p>${description}</p>
                <div class="tags">
                    <span class="tag">新记录</span>
                </div>
                <p class="date">发布日期: ${new Date().toLocaleDateString()}</p>
                <button class="detail-btn">查看详情</button>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            `;
            studyContent.appendChild(newItem);

            // 清空输入框
            newTitleInput.value = '';
            newDescriptionInput.value = '';
        } else {
            alert('请填写主题和描述！');
        }
    });

    // 选择主题功能
    viewTopicBtn.addEventListener('click', function() {
        const selectedTopic = topicSelect.value;

        // 清空当前内容
        studyContent.innerHTML = '';

        if (selectedTopic) {
            // 模拟加载学习记录
            const newItem = document.createElement('div');
            newItem.classList.add('study-item');
            newItem.innerHTML = `
                <h3>${selectedTopic} 学习记录</h3>
                <p>这是关于 ${selectedTopic} 的学习记录内容...</p>
                <div class="tags">
                    <span class="tag">${selectedTopic}</span>
                </div>
                <p class="date">发布日期: ${new Date().toLocaleDateString()}</p>
                <button class="detail-btn">查看详情</button>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            `;
            studyContent.appendChild(newItem);
        } else {
            alert('请选择一个主题！');
        }
    });
}); 